<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <el-dialog title="" :visible.sync="Show" :fullscreen='true' :show-close='false' append-to-body custom-class="fulldialog pointer-plan" :close-on-press-escape='false'>
    <!-- 自定义关闭按钮 -->
    <div class="dialog-header-wrap line-with-verticl">
      <div class="line-with-verticl"></div>
      <div class="dialog-header-handle">
        <div class="plantitle">{{buildinfo.bName}} · {{floor}}F</div>
        <div class="handle-tools">
          <div class="map-warning-num" v-show="isSelectMode&&deviceUnsign>0">
            <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{deviceUnsign}}个设备未标记
          </div>
          <div class="map-listchange__mode"
               :class="{'map-mode-select':isSelectMode}"
               @click="changeMode('img')"
               v-if="planSetup==1">
            <i class="icon-map-location">
              <icon-svg icon-class="viewimg" />
            </i>平面图模式
          </div>
          <div class="map-listchange__mode" :class="{'list-mode-select':!isSelectMode}" @click="changeMode('list')"><i><icon-svg icon-class="listview" /></i>列表模式</div>
          <div class="dialog-handle-items" @click="init"><i class="el-icon-refresh"></i></div>
          <div class="dialog-handle-items" @click="closeDialog"><i class="el-icon-close"></i></div>
        </div>
      </div>
    </div>
    <el-container>
      <el-header style="height: 0"></el-header>
      <el-main>
        <!-- 图片点显示 -->
        <div class="plan-imgbox" v-show="isSelectMode">
          <div class="img-view-wrap" @mousewheel="mousewheel" v-loading="loading">
            <div class="img-view-body" @mousedown.prevent="mousedown" ref="buildimgBox">
              <img ref="buildimg" :src="urlimg" title="鼠标可拖动，缩放" v-show="urlimg">
              <div class="sensor-pointer" v-for="item in sensorMarkers" :key="item.id" :style="{'left':item.positionSignX+'px','top':item.positionSignY+'px'}" :class="{'abnoraml':item.status==0||item.status==4,'alarm':item.status==1}">
                <el-popover placement="top-end" width="250" trigger="click" @show="sensorStatus(item.id)" popper-class="mypopper">
                  <div class="sensor-detail-box">
                    <!--<div class="icon-type"></div>-->
                    <div class="ss-header-box">
                      <div class="ss-title" :title="markerInfo.series">{{markerInfo.series}}<span style="color:rgba(255,255,255,.7)" :title="'消防主机ID:'+markerInfo.fireMain+'回路-地址:'+markerInfo.sensorLoop+'-'+markerInfo.address">(消防主机ID:{{markerInfo.fireMain}} 回路-地址:{{markerInfo.sensorLoop}}-{{markerInfo.address}})</span></div>
                      <div class="ss-address">
                        <i class="el-icon-location"></i>{{markerInfo.positionDescription}}
                      </div>
                      <div class="ss-datetime">
                        <i class="el-icon-date"></i>{{markerInfo.date}}
                      </div>
                    </div>
                    <div class="ss-status-list" v-loading="loading">
                      <el-scrollbar style="height: 100%;">
                        <p class="ss-status-title">实时状态：</p>
                        <div class="no-list-text" v-if="markerInfo.status&&markerInfo.status==='4'">
                          设备离线，{{markerInfo.time}}无反馈
                        </div>
                        <span v-else :style="{background:markerInfo.color}" class="fm-list-text">
                          {{markerInfo.type}}
                        </span>
                      </el-scrollbar>
                    </div>
                  </div>
                  <span :style="{'color':item.color}" slot="reference">
                                        <div class="icon-sensor-dot" :class="{'dot-abnoraml':item.status==0||item.status==4,'dot-alarm':item.status==1}"></div>
                                        <svg-icon icon-class="checklocal" />
                                    </span>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
        <!-- 列表模式 -->
        <div class="plan-listbox" v-show="!isSelectMode" style="height:calc(100vh - 66px);">
          <el-row style="padding: 0 30px 24px 30px;height: 100%;">
            <el-row style="height:28px;text-align: right;line-height: 28px;">状态
              <el-select v-model="queryalamlist.status" placeholder="请选择" size="mini">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="正常" value="2"></el-option>
                <el-option label="故障" value="0"></el-option>
                <el-option label="报警" value="1"></el-option>
                <el-option label="离线" value="4"></el-option>
              </el-select>
              <el-button type="primary" @click="searchByStatus" size="mini">查询</el-button>
            </el-row>
            <el-row style="margin-top: 32px;height:calc(100% - 66px)">
              <el-scrollbar style="height:100%">
                <el-table
                  :data="alrmtableData"
                  v-loading.body="alamLoading"
                  style="width: 100%">
                  <el-table-column
                    label="位置描述">
                    <template slot-scope="scope">
                      <span>{{scope.row.positionDescription}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="消防主机ID">
                    <template slot-scope="scope">
                      <span>{{scope.row.fireMainId}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="回路">
                    <template slot-scope="scope">
                      <span>{{scope.row.sensorLoop}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="地址">
                    <template slot-scope="scope">
                      <span>{{scope.row.address}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="系列">
                    <template slot-scope="scope">
                      <span>{{scope.row.series}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                              <span
                                :style="{color:scope.row.color}">{{scope.row.status}}
                              </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="实时数据">
                    <template slot-scope="scope">
                      <el-button type="text" @click="viewActionData(scope.row.id)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-footer>
                  <div class="pagination-container">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryalamlist.page"
                                   :page-sizes="[10,20,30,40]" :page-size="queryalamlist.limit" layout="total, sizes, prev, pager, next, jumper" :total="alamtotal">
                    </el-pagination>
                  </div>
                </el-footer>
              </el-scrollbar>
            </el-row>
          </el-row>
        </div>
        <!-- 左侧信息展示框 -->
        <div class="plan-pannel" :class="{'plan-pannel-close':isClosed}">
          <el-scrollbar style="height: 100%;">
            <div class="realtime-tabchange">
              <el-radio-group v-model="radioInfo" size="mini">
                <el-radio-button label="radflooinfo" style="width: 35%">楼层信息</el-radio-button>
                <el-radio-button label="radbuildinginfo" style="width: 35%">建筑信息</el-radio-button>
              </el-radio-group>
            </div>
            <div class="realtime-change-content" v-show="radioInfo==='radflooinfo'">
              <div class="wrap-with-halfboder"></div>
              <!--设备统计-->
              <div class="plan-statistics-table">
                <div class="f-title">设备统计</div>
                <div class="device-static-chart" id="statistics_circle_nomalfloor"></div>
                <div class="device-chart-box" v-show="deviceUnable>0">
                  <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{deviceUnable}}个设备未启用
                  <el-button type="text" @click="viewUnableList('floorlist')">点击查看</el-button>
                </div>
              </div>
              <!--传感器类别-->
              <div class="pannel-sensor-list">
                <el-scrollbar style="height: 100%;">
                  <div class="ps-title">
                    传感器类别
                  </div>
                  <ul class="sensor-list" style="height: 100%;" v-loading="loading">
                    <li v-if="sensorTypelist&&sensorTypelist.length<1">
                      暂无传感器类别
                    </li>
                    <li v-else v-for="item in sensorTypelist" :key="item.type">
                      <div class="type-name">
                        <i :style="{'color':item.color}">
                          <icon-svg icon-class="checklocal" />
                        </i>
                        {{item.type}}(个)
                      </div>
                      <div class="type-num" style="margin-right: 10px;">{{item.count}}</div>
                    </li>
                  </ul>
                </el-scrollbar>
              </div>
              <!--楼层报警记录-->
              <div class="plan-alarm-recorde">
                <p class="ar-title"><i class="el-icon-caret-right"></i>报警记录</p>
                <ul class="recorde-list" style="height:260px" v-loading="recoderloading">
                  <el-scrollbar style="height: 100%;">
                    <p v-if="abnormalList&&abnormalList.length<1">
                      暂无报警记录
                    </p>
                    <li v-else v-for="(item,index) in abnormalList" :key="index">
                      <div class="item-name">
                                        <span class="recorde-title" :title="item.equipmentType+'('+item.positionDescription+')'">
                                          <i><icon-svg icon-class="checklocal" style="fill: #FF3829;"/></i>
                                          {{item.series}}({{item.positionDescription}})
                                        </span>
                      </div>
                      <div class="item-date">
                                      <span v-if="item.unit" :title="item.unit">
                                        {{item.unit}}
                                      </span>
                        <span v-if="item.alrmType" :title="item.alrmType">
                                        {{item.alrmType}}
                                      </span>
                        <span v-if="item.alrmDate" :title="item.alrmDate">{{item.alrmDate}}</span>
                      </div>
                    </li>
                    <p style="text-align: center;" v-show="showMore">
                      <span @click="alarmList()" style="color:#50E3C2;font-size:14px;cursor:pointer">加载更多<i class="el-icon-arrow-down"></i></span>
                    </p>
                  </el-scrollbar>
                </ul>
              </div>
            </div>
            <div class="realtime-change-content" v-show="radioInfo==='radbuildinginfo'">
              <div class="wrap-with-halfboder"></div>
              <!--建筑信息-->
              <div class="pannel-alarm-floor">
                <div class="f-title">报警楼层</div>
                <div class="floor-list">
                  <i class="floor-list-icon" v-show="abnormalFloor&&abnormalFloor.length>0">
                    <icon-svg icon-class="baojing" />
                  </i>
                  <span v-if="abnormalFloor.length<1" style="color:#666;width:100%;cursor:text">暂无报警楼层</span>
                  <span v-else :class="{'type-wran':item.status==='1','type-abnormal':item.status==='0'}" v-for="item in abnormalFloor" :key="item.floor" @click="jumpFloor(item.floor)">{{item.floor}}F</span>
                </div>
              </div>
              <!--设备统计图表-->
              <div class="plan-statistics-table">
                <div class="f-title">设备统计</div>
                <div class="device-static-chart" id="statistics_circle_nomal"></div>
                <div class="device-chart-box" v-show="allDeviceUnable>0">
                  <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{allDeviceUnable}}个设备未启用
                  <el-button type="text" @click="viewUnableList">点击查看</el-button>
                </div>
              </div>
              <!--查看建筑详情-->
              <div class="pannel-address">
                <p>地址：{{buildinfo.bAddress}}</p>
                <p>责任人：{{buildinfo.safeDutyName}}</p>
                <p>电话：{{buildinfo.safeDutyPhone}}</p>
                <el-button type="text" @click="showBuildInfo">建筑详情<i class="el-icon-back" style="transform: rotate(180deg);"></i></el-button>
              </div>
            </div>
          </el-scrollbar>
          <div class="plan-close-btn" :class="{'plan-close-btn__close':isClosed}" @click="toggleClose">
            <i class="el-icon-arrow-left"></i>
          </div>
        </div>

        <!-- 楼层切换handler -->
        <div class="plan-handler" style="height:calc(100vh - 66px)">
          <el-scrollbar style="height:100%">
            <ul class="plan-floor-list">
              <li class="plan-floor-item" :class="{'floor-breakdown':item.type=='0','floor-alarm':item.type=='1','floor-selected':item.floor==floor}" v-for="item in floorList" :key="item.floor" @click="jumpFloor(item.floor)">
                <span v-if="item.type==='0'||item.type==='1'"><icon-svg icon-class="alamrecord"/></span>
                {{item.floor}}F</li>
            </ul>
          </el-scrollbar>
        </div>
        <div class="real-scaleimg" v-show="isSelectMode">
          <i class="el-icon-plus" style="color: #000000;padding: 1px;border-bottom: 1px solid #dddddd;" @click="scalebig"></i><br>
          <i class="el-icon-minus" @click="scalesmall"></i>
        </div>
      </el-main>
      <BuildDetail :Show.sync="isShowBuildInfo" :infoId="infoId" :title="buildinfo.bName"/>
      <ActualData :Show.sync="isactiondata" :sensorid="sensorid"></ActualData>
      <unabledList :Show.sync="isNotabledShow" :channelId="channelId" :buildingId="infoId" :floorId="floorunList"></unabledList>
    </el-container>
  </el-dialog>
</template>

<script>
  import echarts from 'echarts';
  import {
    getBuildInfo,
    getFloor,
  } from "@/api/device/realtimePoints/index";
  import {
    floorSensorStatus,
    floorAlarm,
    getFloorSensors,
    selectStatusCount,
    getSensorCount,
    getAbnormalList,
    getUnsignCount,
    viewByList
  } from  "@/api/device/deviceFireMain/index";
  import ActualData from "@/components/ActualData/rtindex";
  import BuildDetail from "@/components/BuildDetail";
  import unabledList from "./notabledList";

  export default {
    name: "planDialog",
    components:{ActualData,BuildDetail,unabledList},
    props: {
      Show: {
        required: true,
        default: false
      },
      channelId:{
        type: String,
        default: ""
      },
      buildId: {
        type: String,
        default: ""
      },
      newfloor:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        deviceUnsign:'',
        isNotabledShow:false,
        radioInfo:'radflooinfo',
        deviceUnable:'',
        allDeviceUnable:'',
        sensorTypelist: [],
        abnormalList: [],
        abnormalFloor: [],
        buildinfo: {},
        markerInfo:{},
        showMore: false,
        floor:1,
        floorunList:'',
        page: 0,
        total: 0,
        multiple: 1,
        urlimg: "",
        imgWidth: null,
        isClosed: false,
        loading:false,
        alarmids: [],
        sensorMarkers: [],
        floorList: [],
        isSelectMode:true,
        alamtotal:0,
        queryalamlist:{
          page:1,
          limit:10,
          status:"-1"
        },
        alrmtableData:[],
        alamLoading:false,
        recoderloading:false,
        sensorid:"",
        isactiondata:false,
        isShowBuildInfo:false,
        planSetup:"0",
        infoId:""
      };
    },
    filters:{
      calcStatus(val){
        const status=["故障","报警","正常","未启用"];
        return status[val];
      }
    },
    methods: {
      renderChart(chartobj,ele){
        // 图表
        let chartnormal = echarts.init(document.getElementById(ele));
        let option = {
          legend: {
            orient: 'vertical',
            icon:'circle',
            right: '10',
            top:'center',
            textStyle: {
              color: 'rgba(80, 227, 194, 0.7)'
            },
            data:['正常','故障','报警'],
            color:['#50E3C2','#f5a623','#DB361D'],
          },
          tooltip : {
            trigger: 'item',
            formatter: "{b} ({d}%)"
          },
          color:['#50E3C2','#f5a623','#DB361D'],
          graphic:[
            {
              type:"text",
              left:"33%",
              top:"40%",
              style:{
                text:'设备数量',
                textAlign:"center",
                fill:"rgba(80, 227, 194, 0.3)",
                fontSize:12,
              }
            },
            {
              type:"text",
              left:"36 %",
              top:"47%",
              style:{
                text:chartobj.normalCount+chartobj.faultCount+chartobj.callCount,
                textAlign:"center",
                fill:"#50E3C2",
                fontSize:26,
                fontFamily:'digital',
              }
            },
          ],
          series : [
            {
              name:'',
              type: 'pie',
              hoverAnimation:false,
              radius : ['50%','90%'],
              center: ['40%', '50%'],
              data:[
                {value:chartobj.normalCount, name:'正常'},
                {value:chartobj.faultCount, name:'故障'},
                {value:chartobj.callCount, name:'报警'},
              ],
              label:{
                show: true,
                position : 'inner',
                formatter: '{b}'+'{c}个'+'\n'+'{d}%',
              },
              itemStyle: {
                emphasis: {
                  show:false,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        chartnormal.setOption(option);
      },
      jumpFloor(val) {
        //更新楼层信息
        this.floor = val;
        //更新分页信息
        this.page = 1;
        //  更新报警记录
        this.abnormalList = [];
        // 重新获取楼层图片传感器等信息

        //状态数量信息
        this.getStatusCount();
        this.getUnsignstat();
        this.getFloorStatusCount();
        //传感器类别列表
        this.getFloorSensNum();
        //报警记录列表
        this.page=0;
        this.alarmList();
        // 右侧楼层列表
        this.getFloors();
        if (this.isSelectMode) {
          this.changeMode("img");
        }else{
          this.changeMode("list");
        }
      },
      sensorStatus(sensorId){
        // 传感器的详细信息
        floorSensorStatus({sensorId:sensorId, channelId:this.channelId}).then((res)=>{
          this.markerInfo = res.data;
        })
      },
      getFloorSors(){
        this.loading = true;
        getFloorSensors({buildId: this.buildId, floor:this.floor, channelId:this.channelId}).then((res)=>{
          this.loading = false;
          this.urlimg = res.data.url;
          this.sensorMarkers = res.data.sensor;
          // 获取平面图宽度
          this.getImgWidth();
          //重置图片大小位置和坐标
          this.resetImgPos();
        })

      },
      resetImgPos(){
        let img = this.$refs.buildimg;
        img.style.width = 'auto';
        let imgbox = this.$refs.buildimgBox;
        imgbox.style.left = '50%';
        imgbox.style.top = '50%';
        this.rendermaker("big",1)
      },
      alarmList() {
        //报警记录
        this.recoderloading = true;
        this.page = this.page + 1;
        let cpage = this.page;
        getAbnormalList({
          buildId: this.buildId,
          channelId:this.channelId,
          floor: this.floor,
          page: cpage,
          limit: 10
        }).then(res => {
          this.recoderloading = false
          this.total = res.data.total;
          this.abnormalList = this.abnormalList.concat(res.data.rows);

          let totalPage = parseInt((this.total + 9) / 10);
          this.showMore = cpage - totalPage < 0;
        });
      },
      buildInfo() {
        getBuildInfo({ buildId: this.buildId, channelId:this.channelId }).then(res => {
          this.buildinfo = res.data;
        });
      },
      getFloors() {
        getFloor({ buildId: this.buildId, channelId:this.channelId }).then(res => {
          this.floorList = res.data;

          let orids = this.abnormalFloor;
          let alramids = orids;
          let listitem = this.floorList;
          for (let i = 0; i < listitem.length; i++) {
            listitem[i].type = "";
            for (let j = 0; j < alramids.length; j++) {
              if (listitem[i].floor == alramids[j].floor) {
                listitem[i].type = alramids[j].status;
              }
            }
          }
          this.floorList = listitem;
        });
      },
      getFloorAlarm(){
        //传感器报警楼层
        floorAlarm({ buildId: this.buildId, channelId:this.channelId }).then(res => {
          this.abnormalFloor = res.data;
          let response = res.data;
          let alarmids = [];
          response.forEach((floor)=>{
            alarmids.push(floor.floor)
          });
          this.alarmids = alarmids;
          if(alarmids.length>0){
            if (this.newfloor!==0) {
              this.floor = this.newfloor;
            }else{
              this.floor = alarmids[0];
            }
          }else{
            if (this.newfloor!==0) {
              this.floor = this.newfloor;
            }
          }

          //状态数量信息
          this.getStatusCount();
          //单个楼层标记状态统计
          this.getFloorStatusCount();
          // 单层
          //  未标记设备数量
          this.getUnsignstat();
          //传感器类别列表
          this.getFloorSensNum();
          //报警记录列表
          this.alarmList();
          // 右侧楼层列表
          this.getFloors();
          //默认为列表模式
          this.changeMode("list");
        });
      },
      getFloorSensNum(){
        //传感器类别
        this.loading = true;
        getSensorCount({buildId: this.buildId,floor: this.floor, channelId:this.channelId}).then(res => {
          this.loading = false;
          this.sensorTypelist = res.data;
        });
      },
      getStatusCount(){
        //整栋建筑的状态数量信息
        selectStatusCount({buildId: this.buildId, channelId:this.channelId}).then(res => {
          this.renderChart(res.data,'statistics_circle_nomal')
        });
      },
      getFloorStatusCount(){
        //单个楼层传感器状态数量信息
        selectStatusCount({buildId: this.buildId, floor: this.floor, channelId:this.channelId}).then(res => {
          this.renderChart(res.data,'statistics_circle_nomalfloor')
        });
      },
      getUnsignstat(){
        getUnsignCount({buildId: this.buildId, floor: this.floor, channelId:this.channelId}).then(res => {
          this.deviceUnsign = res.data.unlabeledCount;
          this.deviceUnable = res.data.notEnabledCount;
          this.allDeviceUnable = res.data.allNotEnabledCount;
        })
      },
      init() {
        //传感器报警楼层
        this.getFloorAlarm();
        //建筑物信息
        this.buildInfo();

        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        });

        this.infoId=this.buildId;
      },
      closeDialog() {
        //当面板关闭(点击关闭按钮)
        this.$emit("update:Show", false);
      },
      getImgWidth() {
        //   if (this.imgWidth) {
        //     return;
        //   }
        let img = new Image();
        img.src = this.urlimg;
        img.onload = () => {
          this.imgWidth = img.width;
        };
      },
      mousedown(event) {
        let el = event.currentTarget;
        let disX = event.clientX - el.offsetLeft;
        let disY = event.clientY - el.offsetTop;
        document.onmousemove = e => {
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          //移动当前元素
          el.style.left = l + "px";
          el.style.top = t + "px";
          return false;
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
      mousewheel(e) {
        document.querySelector("#app").click();
        let delta = e.wheelDelta || -e.detail;

        delta > 0 ? this.scaleLarge() : this.scaleSmall();
        return false;
      },
      scalebig() {
        let img = this.$refs.buildimg;
        if (img.width / this.imgWidth > 3) {
          return false;
        }
        img.style.width = img.width * 1.2 + "px";
        this.rendermaker("big", 1.2);
      },
      scalesmall() {
        let img = this.$refs.buildimg;
        if (this.imgWidth / img.width > 3) {
          return false;
        }
        img.style.width = img.width / 1.2 + "px";
        this.rendermaker("small", 1.2);
      },
      scaleLarge() {
        let img = this.$refs.buildimg;
        let prw = img.width;
        //图片宽高
        if (this.imgWidth !== null && img.width / this.imgWidth <= 3) {
          img.style.width = (img.width * 1.2).toFixed(1) + "px";
          let crw = img.width;
          let rate = (crw / prw).toFixed(1);
          this.rendermaker("big", rate);
        } else {
          return false;
        }
      },
      scaleSmall() {
        let img = this.$refs.buildimg;
        let prw = img.width;
        //图片宽高
        if (this.imgWidth !== null && this.imgWidth / img.width <= 3) {
          img.style.width = (img.width / 1.2).toFixed(1) + "px";
          let crw = img.width;
          let rate = (prw / crw).toFixed(1);
          this.rendermaker("small", rate);
        } else {
          return false;
        }
      },
      rendermaker(type, rate) {
        let markers = this.sensorMarkers;
        if (type === "big") {
          markers.map(item => {
            item.positionSignX = (item.positionSignX * rate).toFixed(1);
            item.positionSignY = (item.positionSignY * rate).toFixed(1);
          });
        } else {
          markers.map(item => {
            item.positionSignX = (item.positionSignX / rate).toFixed(1);
            item.positionSignY = (item.positionSignY / rate).toFixed(1);
          });
        }
      },
      toggleClose() {
        this.isClosed = !this.isClosed;
      },
      viewUnableList(val){
        //  未启用列表
        this.floorunList = '';
        this.isNotabledShow = true;
        if (val==='floorlist'){
          this.floorunList = this.floor;
        }
      },
      getalamData(){
        this.alamLoading=true;
        viewByList( Object.assign({channelId:this.channelId,buildingId:this.buildId,floor:this.floor},this.queryalamlist)).then(res=>{
          this.alrmtableData=res.data.rows;
          this.alamtotal=res.data.total;
          this.alamLoading=false;
        }).catch(()=>{
          this.alamLoading=false;
        })
      },
      resetalamquery(){
        this.queryalamlist.page=1;
        this.queryalamlist.limit=10;
        this.queryalamlist.status="-1";
      },
      searchByStatus(){
        this.queryalamlist.page=1;
        this.queryalamlist.limit=10;
        this.getalamData();
      },
      changeMode(type){
        switch(type){
          case "img":
            this.urlimg = "";
            this.getFloorSors();
            this.isSelectMode=true;
            break;
          case "list":
            this.resetalamquery();
            this.getalamData();
            this.isSelectMode=false;
            break;
        }
      },
      handleSizeChange(val){
        this.queryalamlist.limit=val;
        this.getalamData();
      },
      handleCurrentChange(val){
        this.queryalamlist.page=val;
        this.getalamData();

      },
      viewActionData(id){
        //id是设备编号
        this.sensorid=id;
        this.isactiondata=true;
      },
      showBuildInfo(){
        this.isShowBuildInfo=true;
      }
    },
    mounted() {},
    watch: {
      Show(v) {
        if (v) {
          let self = this;
          this.$nextTick(() => {
            self.init();
          });
        } else {
          this.abnormalList = [];
          this.page = 0;
          this.floor = 1;
          this.changeMode("list");
          this.isClosed = false;
        }
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .device-static-chart{
    width: 319px;
    height: 120px;
  }
  .plan-statistics-table{
    .s-container{
      padding-top: 10px;
    }
  }
  .sensor-detail-box,.plan-handler,.plan-listbox,.recorde-list,.plan-pannel{
    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  }
  .drag-ele {
    height: 50px;
    width: 50px;
    border: 1px solid red;
    position: absolute;
    left: 0;
    top: 0;
  }
  .fulldialog {
    &.pointer-plan {
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
          margin-left: 0;
        }
      }
      .pannel-alarm-floor,
      .pannel-sensor-list,
      .plan-alarm-recorde,
      .plan-statistics-table,
      .pannel-address {
        padding: 25px 20px;
        box-sizing: border-box;
      }
      .pannel-sensor-list {
        height: 230px;
      }
      .plan-alarm-recorde {
        min-height: 300px;
        .recorde-list {
          li {
            font-size: 12px;
            padding-bottom:18px;
          }
        }
      }
      .pannel-address {
        padding-top: 10px;
        p {
          margin: 0;
          line-height: 2.2;
        }
      }
      .plan-pannel {
        .plan-close-btn {
          z-index: 9;
          cursor: pointer;
          position: absolute;
          top: 39px;
          right: -4px;
          width: 22px;
          height: 0;
          border-top: 14px solid #50E3C2;
          border-right: 4px solid transparent;
          border-left: 4px solid transparent;
          transform: rotate(90deg);
          .el-icon-arrow-left {
            color: #000;
            transform: rotate(-90deg) translateX(15px);
          }
        }
        &.plan-pannel-close {
          transform: translateX(-360px);
          transition: all 0.3s;
          .plan-close-btn {
            transform: rotate(-90deg) translateY(15px);
          }
        }
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 24px;
        top: 14px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
      .plan-handler {
        margin-left: 10px;
        margin-right: 5px;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        .plan-floor-list {
          width: 57px;
          margin: 0;
          padding: 0;
          margin-right: 10px;
        }
      }
      .plan-imgbox {
        height: 100%;
        .img-view-wrap {
          position: absolute;
          left: 10px;
          top: 10px;
          bottom: 10px;
          right: 10px;
          overflow: hidden;
          .img-view-body {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            overflow: hidden;
            cursor: pointer;
            img{
              cursor: move;
            }
            .sensor-pointer {
              position: absolute;
              color: #fff;
              width: 1px;
              height: 1px;
              &.abnoraml {
                color: #2d2f33;
              }
              &.alarm {
                color: red;
              }
              .svg-icon {
                position: absolute;
                font-size: 30px;
              }
            }
          }
        }
      }
    }
  }
  // 传感器hover css
  .sensor-detail-box {
    font-size: 12px;
    padding-left: 10px;
    .ss-header-box{
      font-size: 14px;
    }
    .ss-status-list{
      height: 80px;
      .fm-list-text{
        font-size: 12px;
        color: #fff;
        line-height: 20px;
        padding: 2px 5px;
      }
    }
    .ss-status-title{
      margin: 0;
      padding: 8px 0;
    }
    .ss-title{
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .el-scrollbar__bar.is-horizontal{
      display: none;
    }
  }
  .real-scaleimg {
    background: #ffffff;
    position: absolute;
    bottom: 20px;
    right: 100px;
    cursor: pointer;
    border: solid 1px #d4d4d4;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
    text-align: center;
  }
  .statistics-box {
    display: flex;
    padding: 8px 0;
    .statis-box-item{
      flex: 1;
      border-left: 1px solid #dfdfdf;
      &:first-child{
        border-left: 0;
      }
    }
    border-bottom: 1px solid #dfdfdf;
    p {
      margin: 0;
      text-align: center;
      line-height: 26px;
    }
    color: #000;
    .s-title {
      font-size: 14px;
    }
  }
  .mypopper{
    transform: translateX(17px);
  }
  @keyframes warn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    25% {
      transform: scale(0);
      opacity: 0.1;
    }
    50% {
      transform: scale(0.1);
      opacity: 0.3;
    }
    75% {
      transform: scale(0.5);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  .icon-sensor-dot{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    position: absolute;
    left: 7px;
    top: 20px;
    &.dot-alarm {
      color: #ff0000;
      background: #ff0000;
    }
    &.dot-abnoraml {
      color: #f08719;
      background: #f08719;
    }
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      left: -22px;
      top: -22px;
      border: 30px solid currentColor;
      border-radius: 30px;
      z-index: 0;
      opacity: 0;
      animation: warn 3s ease-out;
      animation-iteration-count: infinite;
    }
  }
  .floor-breakdown{
    span{
      color:#f08719;
    }
  }
  .floor-alarm{
    span{
      color:red;
    }
  }
  .img-left-bar{
    position: absolute;
    z-index:1;
    top: 24px;
    left:390px;
    height: 40px;
    float: left;
    display: flex;
    .map-list-change{
      background: #fff;
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
      border-radius: 1px;
      margin-right: 10px;
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      padding: 0 10px;
      cursor: pointer;
      border: 1px solid #dddddd;
      .map-listchange__mode{
        padding: 10px 0;
        &:first-child{
          margin-right: 15px;
          .icon-map-location{
            font-size: 16px;
          }
        }
        &.map-mode-select{
          color: #2683F5;
        }
        &.list-mode-select{
          color: #2683F5;
          .class-icon-san{
            border-top: 2px solid #2683F5;
            border-bottom: 2px solid #2683F5;
            background: #2683F5;
            background-clip: content-box;
          }

        }
      }
      .class-icon-san {
        display: inline-block;
        width: 18px;
        vertical-align: middle;
        height: 2px;
        padding: 2px 0;
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
        background: #999;
        background-clip: content-box;
        box-sizing: content-box;
        margin-right: 5px;
      }
    }
  }
  .realtime-tabchange{
    .el-radio-group{
      width: 100%;
      .el-radio-button__inner{
        width: 100%;
      }
    }
  }
  .plan-listbox{
    width:calc(100% - 82px - 360px);
    margin-left:360px;
    height:100%;
  }
  .el-table th {
    background: #f5f7fa;
  }
  .item-date{
    height:17px;
    line-height: 17px;
    margin-left: 10px;
    width:95%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span{
      padding: 0 5px;
      &:not(:last-child){
        border-right:1px solid #d1d1d1d1;
      }
    }
  }
</style>
